<template>
    <div>
        <el-row :gutter="20" class="mgb20">
            <el-col :span="6">
                <el-card shadow="hover" body-class="card-body">
                    <el-icon class="card-icon bg1">
                        <OfficeBuilding />
                    </el-icon>
                    <div class="card-content">
                        <countup class="card-num color1" :end="totalCompany" />
                        <div>公司总数</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" body-class="card-body">
                    <el-icon class="card-icon bg2">
                        <Coin />
                    </el-icon>
                    <div class="card-content">
                        <countup class="card-num color2" :end="totalFinance" />
                        <div>总资金</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" body-class="card-body">
                    <el-icon class="card-icon bg3">
                        <CreditCard />
                    </el-icon>
                    <div class="card-content">
                        <countup class="card-num color3" :end="totalLoan" />
                        <div>总贷款</div>
                    </div>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" body-class="card-body">
                    <el-icon class="card-icon bg4">
                        <Memo />
                    </el-icon>
                    <div class="card-content">
                        <countup class="card-num color4" :end="totalProject" />
                        <div>工程总数</div>
                    </div>
                </el-card>
            </el-col>
        </el-row>

        <el-row :gutter="20" class="mgb20">
            <el-col :span="18">
                <el-card shadow="hover" :body-style="{ height: '450px' }">
                    <div class="card-header">
                        <p class="card-header-title">贷款数据</p>
                    </div>
                    <v-chart class="chart" :option="option" />
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{ height: '450px' }">
                    <div class="card-header">
                        <p class="card-header-title">总资金</p>
                    </div>
                    <v-chart class="chart" :option="dashOpt2" />
                </el-card>
            </el-col>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="18">
                <el-card shadow="hover" :body-style="{ height: '400px' }">
                    <el-table
                        :data="tableData"
                        style="width: 100%"
                        :row-class-name="tableRowClassName"
                    >
                        <el-table-column prop="companyName" label="公司名称" />
                        <el-table-column prop="totalFiance" label="总资金"/>
                        <el-table-column prop="totalLoan" label="总贷款" />
                    </el-table>
                </el-card>
            </el-col>
            <el-col :span="6">
                <el-card shadow="hover" :body-style="{ height: '400px' }">
                    <div class="card-header">
                        <p class="card-header-title">排行榜</p>
                    </div>
                    <div>
                        <div class="rank-item" v-for="(rank, index) in ranksAccount">
                            <div class="rank-item-avatar">{{ index + 1 }}</div>
                            <div class="rank-item-content">
                                <div class="rank-item-top">
                                    <div class="rank-item-title">{{ rank.title }}</div>
                                    <div class="rank-item-desc">资金：{{ rank.value }}</div>
                                </div>
                                <el-progress
                                    :show-text="false"
                                    striped
                                    :stroke-width="10"
                                    :percentage="rank.percent"
                                    :color="rank.color"
                                />
                            </div>
                        </div>
                    </div>
                </el-card>
            </el-col>
        </el-row>
    </div>
</template>

<script setup lang="ts" name="dashboard">
import countup from '@/components/countup.vue';
import { use, registerMap } from 'echarts/core';
import { BarChart, LineChart, PieChart, MapChart } from 'echarts/charts';
import { fetchDashboardData } from '@/api';
import { ref, onMounted, computed } from 'vue';
import {
    GridComponent,
    TooltipComponent,
    LegendComponent,
    TitleComponent,
    VisualMapComponent,
} from 'echarts/components';
import { CanvasRenderer } from 'echarts/renderers';
import VChart from 'vue-echarts';
use([
    CanvasRenderer,
    BarChart,
    GridComponent,
    LineChart,
    PieChart,
    TooltipComponent,
    LegendComponent,
    TitleComponent,
    VisualMapComponent,
    MapChart,
]);


const tableData = ref([])
const loanXNames = ref([]);
const rateY = ref([]);
const loanY = ref([]);
const maxLoanY = ref(0);
const maxRateY = ref(0);
const totalCompany = ref(0);
const totalFinance = ref(0);
const totalLoan = ref(0);
const totalProject = ref(0);
const ranksAccount = ref([]);
onMounted(() => {
    fetchDashboardData().then(res => {
        tableData.value = res.data.accountData;
        
        loanXNames.value = res.data.loanXNames;
        rateY.value = res.data.rateY;
        loanY.value = res.data.loanY;
        maxLoanY.value = res.data.maxLoan * 1.2;
        maxRateY.value = res.data.maxRate * 1.2;
        totalCompany.value = res.data.totalCompany;
        totalFinance.value = res.data.totalFinance;
        totalLoan.value = res.data.totalLoan;
        totalProject.value = res.data.totalProject;
        ranksAccount.value = res.data.accountData.sort((a, b) => b.totalFiance - a.totalFiance);
        ranksAccount.value.forEach(item => {
            console.log(item.totalFiance,"  aaaa ",totalFinance.value);
            item.percent = item.totalFiance / totalFinance.value * 100;
            item.color = '#00bcd4';
            item.title = item.companyName;
            item.value = item.totalFiance;
            item.name = item.companyName;
            item.value = item.totalFiance;
        })
        console.log(ranksAccount.value);

    })
})

const dashOpt2 = computed(() => ({
    legend: {
        bottom: '1%',
        left: 'center',
    },
    color: ['#3f51b5', '#009688', '#f44336', '#00bcd4', '#1ABC9C'],
    tooltip: {  // 添加 tooltip 配置
        trigger: 'item',
        formatter: '{b}: {c}元 ({d}%)'
    },
    series: [
        {
            type: 'pie',
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            itemStyle: {
                borderRadius: 10,
                borderColor: '#fff',
                borderWidth: 2,
            },
            data: ranksAccount.value,
        },
    ],
}));
const option =computed(() => ({
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
   grid: {
    left: 50,   // 距离左侧像素，设置为 0 或 8 视情况而定
    right: 50,  // 距离右侧像素
    top: 60,
    bottom: 40,
    containLabel: true
  },

  legend: {
    data: ['公司贷款',  '贷款利率']
  },
  barWidth: 30,
  xAxis: [
    {
      type: 'category',
      data: loanXNames.value,
      axisPointer: {
        type: 'shadow'
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: '贷款金额(元)',
      min: 0,
      max: maxLoanY.value,
      interval: maxLoanY.value / 5,
      axisLabel: {
        formatter: '{value} '
      }
    },
    {
      type: 'value',
      name: '贷款利率(%)',
      min: 0,
      max: maxRateY.value,
      interval: maxRateY.value / 5,
      axisLabel: {
        formatter: '{value}'
      }
    }
  ],
  series: [
    {
      name: '公司贷款',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value + '元';
        }
      },
      data: loanY.value,
    
    },
    {
      name: '贷款利率',
      type: 'line',
      yAxisIndex: 1,
      tooltip: {
        valueFormatter: function (value) {
          return value + ' %';
        }
      },
      data: rateY.value,
    }
  ]
}));


</script>

<style>
.card-body {
    display: flex;
    align-items: center;
    height: 100px;
    padding: 0;
}
</style>
<style scoped>
.card-content {
    flex: 1;
    text-align: center;
    font-size: 14px;
    color: #999;
    padding: 0 20px;
}

.card-num {
    font-size: 30px;
}

.card-icon {
    font-size: 50px;
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    color: #fff;
}

.bg1 {
    background: #2d8cf0;
}

.bg2 {
    background: #64d572;
}

.bg3 {
    background: #f25e43;
}

.bg4 {
    background: #e9a745;
}

.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}

.color1 {
    color: #2d8cf0;
}

.color2 {
    color: #64d572;
}

.color3 {
    color: #f25e43;
}

.color4 {
    color: #e9a745;
}

.chart {
    width: 100%;
    height: 400px;
}

.card-header {
    padding-left: 10px;
    margin-bottom: 20px;
}

.card-header-title {
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 5px;
}

.card-header-desc {
    font-size: 14px;
    color: #999;
}

.timeline-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
    color: #000;
}

.timeline-time,
.timeline-desc {
    font-size: 12px;
    color: #787878;
}

.rank-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}

.rank-item-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #f2f2f2;
    text-align: center;
    line-height: 40px;
    margin-right: 10px;
}

.rank-item-content {
    flex: 1;
}

.rank-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #343434;
    margin-bottom: 10px;
}

.rank-item-desc {
    font-size: 14px;
    color: #999;
}
.map-chart {
    width: 100%;
    height: 350px;
}
</style>
